<template>
<div class="naCrightWrap">
  <el-dialog title="新增版权" :visible.sync="dialogNewCoryrightFormVisible" custom-class="newAddCoryRightWrapper" top="0">
    <el-form :model="ncform">
      <el-form-item label="IP类型" prop="ipClass" :label-width="formLabelWidth" name="ipSelect">
        <el-radio-group v-model="ncform.radio" @change="ipSelectChange">
          <el-radio :label="3">IP主形象</el-radio>
          <el-radio :label="6">IP图集</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="this.ipVividSgin" label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="ncform" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="this.ipImgSgin" label="IP版权库" :label-width="formLabelWidth">
        <el-select v-model="ncform.ipCoryRights" placeholder="选择版权库">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="this.ipImgSgin" label="版权适用领域" :label-width="formLabelWidth" name="fieldSelect">
        <el-checkbox :indeterminate="ncform.isIndeterminate" v-model="fieldCheckAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="height:1px;border-bottom:1px solid #f7f7f7;"></div>
        <el-checkbox-group v-model="ncform.fieldChecked" @change="handleCheckedOptChange">
          <el-checkbox v-for="opts in ncform.fieldOpt" :label="opts" :key="opts">{{opts}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="版权登记情况" prop="recordWay" :label-width="formLabelWidth" name="ipSelect2">
        <el-radio-group v-model="ncform.radio2" @change="recordWaySelectChange">
          <el-radio :label="21">已通过国家版权局或其他第三方机构登记版权</el-radio>
          <el-radio v-if="this.ipImgSgin" :label="22">尚未登记，使用原仓数字备案免费登记</el-radio>
          <el-radio :label="23">尚未登记且暂不进行登记操作</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">下一步</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
const fieldOptions = ['服装服饰', '家居用品', '家居装饰', '建材', '办公用品', '珠宝钟表', '家用纺织品', '家用器皿', '箱包皮具', '保健美容', '食品饮料', '电子产品', '视频游戏', '玩具', '家具', '电商', '互联网', '影视音乐', '教育出版', '日化洗护', '医疗医药', '制造业', '其他']
export default {
  name: 'NewaddCoryright',
  data () {
    return {
      dialogNewCoryrightFormVisible: false,
      ipVividSgin: true,
      ipImgSgin: false,
      fieldCheckAll: false,
      ncform: {
        radio: 3,
        radio2: false,
        ipCoryRights: '',
        fieldChecked: [],
        fieldOpt: fieldOptions,
        isIndeterminate: false
      },
      formLabelWidth: '139px'
    }
  },
  methods: {
    ipSelectChange (val) {
      console.log(val)
      if (val === 3) {
        this.ipVividSgin = true
        this.ipImgSgin = false
        console.log('选中了IP主形象')
      } else {
        this.ipVividSgin = false
        this.ipImgSgin = true
        console.log('选中了IP图集')
      }
    },
    recordWaySelectChange (val) {
      console.log(val)
    },
    handleCheckAllChange (val) {
      this.ncform.fieldChecked = val ? fieldOptions : []
      this.ncform.isIndeterminate = false
    },
    handleCheckedOptChange (value) {
      if (value) {
        let checkedCount = value.length
        console.log(value)
        this.fieldCheckAll = checkedCount === this.ncform.fieldOpt.length
        this.ncform.isIndeterminate = checkedCount > 0 && checkedCount < this.ncform.fieldOpt.length
        console.log(checkedCount > 0 && checkedCount < this.ncform.fieldOpt.length)
      }
    }
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
.naCrightWrap .el-dialog__wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.newAddCoryRightWrapper {
  width: 640px;
  min-height: 1px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
}
.newAddCoryRightWrapper .el-dialog__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.newAddCoryRightWrapper .el-dialog__header .el-dialog__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.newAddCoryRightWrapper .el-dialog__header .el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.newAddCoryRightWrapper .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.newAddCoryRightWrapper .el-dialog__body {
  position: relative;
  padding: 50px 0 30px;
  color: #333333;
  font-size: 14px;
}
.newAddCoryRightWrapper .el-form-item {
  margin-bottom: 14px;
}
.newAddCoryRightWrapper .el-form-item__label {
  color: #333333;
  padding: 0 20px 0 0;
  position: relative;
  line-height: 36px;
}
.newAddCoryRightWrapper .el-form-item__content {
  line-height: 36px;
}
.newAddCoryRightWrapper .el-radio__inner {
  display: inline-block;
  position: relative;
  border: 1px solid #cccccc;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;
  z-index: 1;
  transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
}
.newAddCoryRightWrapper .el-radio__inner::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-radius: 0;
    background-color: $baseColor;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0) translate(0,0);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
}
.newAddCoryRightWrapper .el-radio__input.is-checked .el-radio__inner,.newAddCoryRightWrapper .el-radio__input.is-focus .el-radio__inner {
    border-color: $baseColor;
    background: $baseColor;
}
.newAddCoryRightWrapper .el-radio__input.is-checked+.el-radio__label {
    color: $baseColor;
}
.newAddCoryRightWrapper .el-radio__input.is-checked .el-radio__inner:after {
    transform: rotate(45deg) scaleY(1);
}
.newAddCoryRightWrapper .el-form-item[name='ipSelect']>.el-form-item__label:after {
    content: '*';
    color: #ff2b2b;
    position: absolute;
    line-height: 36px;
    right: 8px;
}
.newAddCoryRightWrapper .el-form-item[name='ipSelect2']>.el-form-item__label:after {
    content: '*';
    color: #ff2b2b;
    position: absolute;
    line-height: 36px;
    right: 8px;
}
.newAddCoryRightWrapper .el-checkbox__inner {
  border: 1px solid #cccccc;
}
.newAddCoryRightWrapper .el-checkbox__input.is-checked .el-checkbox__inner, .newAddCoryRightWrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $baseColor;
    border-color: $baseColor;
}
.newAddCoryRightWrapper .el-checkbox{
  color: #333333;
  line-height: 36px;
}
.newAddCoryRightWrapper .el-checkbox__input.is-checked+.el-checkbox__label {
    color: $baseColor;
}
.newAddCoryRightWrapper .el-dialog__footer {
  padding: 0 0 45px;
  text-align: center;
  overflow: hidden;
}
.newAddCoryRightWrapper .el-dialog__footer .el-button {
  width: 90px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  text-align: center;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
}
.newAddCoryRightWrapper .el-dialog__footer .el-button--primary {
  color: #FFF;
  background-color: $baseColor;
  margin-left: 139px;
  float: left;
}
.newAddCoryRightWrapper .el-form-item[name='ipSelect2'] {
  margin-bottom: 20px;
}
.newAddCoryRightWrapper .el-form-item[name='ipSelect2'] .el-radio-group .el-radio {
  display: block;
  margin-right: 0;
  line-height: 36px;
  color: #333333;
}
.newAddCoryRightWrapper .el-form-item[name='fieldSelect'] .el-checkbox-group {
  line-height: 25px;
}
.newAddCoryRightWrapper .el-form-item[name='fieldSelect'] .el-checkbox {
    color: #333333;
    line-height: 25px;
    margin-right: 0;
    width: 104px;
}
.newAddCoryRightWrapper .el-form-item[name='fieldSelect'] .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333333;
}
.newAddCoryRightWrapper .el-form-item[name='fieldSelect'] .el-form-item__content {
  width: 450px;
  min-height: 252px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px 10px 10px 15px;
  box-sizing: border-box;
}
.newAddCoryRightWrapper .el-form-item[name='fieldSelect'] .el-checkbox-group {
  padding-top: 8px;
}
.newAddCoryRightWrapper .el-input__inner {
  border: 1px solid #cccccc;
  height: 36px;
  line-height: 36px;
  width: 450px;
  box-sizing: border-box;
}
</style>
